<template>
	<view class="box">
		<view class="head">
			<view class="head_top">
				<image :src="home" mode="widthFix" class="img" @click="index()"></image>
				<text>{{tuany}}</text>
			</view>
			<view class="head_center flex">
				<view class="head__center_left" @click="geren()">
					<image :src="me1" mode="widthFix"></image>
				</view>

				<view class="head_center_right">

					<view class="h_c_r_top flex">
						<view class="phone">{{phone}}</view>
						<view class="flex top_right_r">
							<view class="qian flex">
								<image :src="qianimg" mode="" class="img"></image>
								<view class="qian_one" @click="qian()">签到领奖&gt;</view>
							</view>
							<view class="kefu" @click="service()">
								<image :src="kefu" mode="" class="img"></image>
							</view>
						</view>

					</view>

					<view class="h_c_r_bottom flex" v-for="(item,index) in head_bottom" :key="index">
						<view class="head_zhu"  @click="zhu()">{{item.name}}</view>
						<view class="head_wei" @click="wei()">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--头部结束-->
		<view class="main_content">
			<view class="main_contents">
				<view class="money_top flex" v-for="(item,index) in hui1" :key="index">
					<image :src="item.img" mode="" class="img"></image>
					<text class="m_t_one">{{item.text1}}</text>
					<text class="m_t_two">{{item.text2}}</text>
					<text class="m_t_three" @click="zhu()">{{item.text3}}</text>
				</view>
				<view class="money_bottom flex" >
					<view class="flex" v-for="(item,index) in hui2" :key="index">
						<image :src="item.src" mode=""></image>
					<p>{{item.title}}</p>
					</view>
					
				</view>
			</view>

		</view>
		<!-- 省钱会员结束 -->
		<view class="deng flex"v-for="(item,index) in deng" :key="index">
			<view class="deng_zuo " >
				<view class="d_z_top">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{item.deng1}}</text>
				</view>
				<view class="d_z_bottom">
					<tabs :percentage="0" percentBackground="#ccc"></tabs>
					 <!-- <uniProgress :percentage="20" explain="2票" percentBackground="red"></uniProgress>
					  <uniProgress :percentage="20" explain="2票" percentBackground="yellow"></uniProgress> -->
				</view>
			</view>
			<view class="deng_you" @click="deng1()">
				{{item.deng2}}
			</view>
		</view>
		<!-- 等级结束 -->
		<view class="mine_assets">
			<view class="assets_title">
				我的资产
			</view>
			<view class=" assets_shu flex">
				<dl v-for="(item,index) in assets" :key="index" @click="goNews(item.id)">
					<dd>{{item.jia_money}}</dd><dt>{{item.text}}</dt>
				</dl>
			</view>
			<view class="asstes_list">
				<ul class="assets_lists flex1">
					<li v-for="(item,index) in assets_list" :key="index" class="flex" @click="gosi(item.id)">
						<view class="assets_lists_left">
							<view class="lists_left_top">{{item.title}}</view>
							<view class="lists_left_top1">{{item.title1}}</view>
						</view>
						<view class="lists_right">
							<image :src="item.src" mode="" class="img"></image>
						</view>
					</li>
				</ul>
			</view>
		</view>
		<!-- 资产结束 -->
		<view class="guang">
			<image :src="guang" mode="widthFix"></image>
		</view>
		<!-- guanggao -->
		<view class="tool">
			<view class="tool_title">
				常用工具
			</view>
			<view class="tool_top flex">
				<dl class="tools " v-for="(item,index) in tools" :key="index" @click="tools1(item.id)">
				<dt><image :src="item.src" mode=""></image> </dt><dd>{{item.title}}</dd></dl>
			</view>
			<view class="flex2 tool_bottom">
				<dl class="tools " v-for="(item,index) in toolss" :key="index"  @click="tools2(item.id)">
				<dt><image :src="item.src" mode=""></image> </dt><dd>{{item.title}}</dd>
			</dl>
			</view>
		</view>
	</view>
</template>

<script>
	import tabs from "@/components/tabs.vue"
	export default {
		components:{
			tabs
		},
		data() {
			return {
				home: "../../static/fang.png",
				tuany: "团油",
				me1: "../../static/me1.png",
				phone: '155******76',
				qianimg: "../../static/q4_03.png",
				kefu: '../../static/kefu.png',
				guang:'../../static/me1 (2).gif',
				hui1:[{img:'../../static/me1 (1).gif',text1:"省钱会员",text2:'每月领48元专属红包',text3:'立即开通>'}],
				hui2: [
						{src: '../../static/me1 (4).gif',title: '超值红包',id: '1'},
						{src: '../../static/me1 (4).gif',title: '会员抽奖',id: '2'},
					  {src: '../../static/me1 (4).gif',title: '专属客服',id:'3'},
						{src: '../../static/me1 (4).gif',title: '敬请期待',id: '4'},],
					head_bottom: [{name: "注册会员",title: '未认证物流车/商用车'}, ],
					deng:[{img:"../../static/me1 (4).png",deng1:'V1成长等级0/200',deng2:'查看权益>'}],
					assets:[
						{jia_money:'0.00',text:'加油金（元）',id:'1'},
						{jia_money:'0',text:'优惠券（张）',id:'2'},
						{jia_money:'0',text:'红包（个）',id:'3'},
						{jia_money:'0',text:'油滴（个）',id:'4'},
					],
					assets_list:[
						{title:'每日签到',title1:'每日签到领加油金',src:'../../static/我的_05 (6).gif',id:'1'},
						{title:'省钱专区',title1:'加油每升最高直降1元',src:'../../static/我的_05 (6).gif',id:'2'}
					],
					tools:[
						{src:'../../static/我的_05 (10).gif',title:'油价预测',id:'1'},
						{src:'../../static/我的_05 (11).gif',title:'车主权益',id:'2'},
						{src:'../../static/我的_05 (12).gif',title:'我的礼品',id:'3'},
						{src:'../../static/我的_05 (13).gif',title:'我的收藏',id:'4'},
						{src:'../../static/我的_05 (14).gif',title:'我要合作',id:'5'},
						
					],
					toolss:[
						{src:'../../static/我的_05 (15).gif',title:'客服中心',id:'6'},
						{src:'../../static/我的_05 (16).gif',title:'公司证照',id:'7'},
						{src:'../../static/我的_05 (17).gif',title:'设置',id:'8'}
					]
				}
			},
			methods: {
				//跳转首页
				index: function() {
					uni.switchTab({
						url: '../index/index'
					})
				},
				//跳转个人信息
				geren: function() {
					uni.navigateTo({
						url: './geren'
					})
				},
				// 跳转签到
				qian: function() {
					uni.navigateTo({
						url: './qian',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				},
				// 在线客服
				service:function(){
					uni.navigateTo({
						url:"/pages/me/kefu"
					})
				},
				// 注册会员
				zhu:function(){
					uni.navigateTo({
						url:"./huiyuan"
					})
				},
				// 未认证
				wei:function(){
					uni.navigateTo({
						url:"../index/renZ"
					})
				},
				// 查看权益
				deng1:function(){
					uni.navigateTo({
						url:"./quanyi"
					})
				},
				// 我的资产
			goNews:function(id){
						if ( id ==1){
							uni.navigateTo({
								url:'./jyj1'
							})
						} else if (id == 2){
							uni.navigateTo({
								url:'./yh'
							})
						} else if ( id == 3){
							uni.navigateTo({
								url:'./hb'
							})
						} else if(id==4){
							uni.navigateTo({
								url:'./youdi'
							})
						}
					},
						gosi:function(id){
									if ( id ==1){
										uni.navigateTo({
											url:'./qian'
										})
									} 
									else if(id==2){
										uni.navigateTo({
											url:'./shengq'
										})
									}
								},
								// 常用工具
								tools1:function(id){
									if(id==1){
										uni.navigateTo({
											url:"./youjia"
										})
									}else if(id==2){
										uni.navigateTo({
											url:"./chezhu"
										})
									}else if(id==3){
										uni.navigateTo({
											url:"./lipin"
										})
									}
									else if(id==4){
										uni.navigateTo({
											url:"./shoucang"
										})
									}else if(id==5){
										uni.navigateTo({
											url:"./hezuo"
										})
									}
								},
								tools2:function(id){
									if(id==6){
										uni.navigateTo({
											url:"./kefucenter"
										})
									}else if(id==7){
										uni.navigateTo({
											url:"./gongsi"
										})
									}else if(id==8){
										uni.navigateTo({
											url:"./shezhi"
										})
									}
								},
								
					},
					
				
			}
		
</script>

<style>
	@import url("../../static/css/me.css");
</style>
